<template>
	<view :data-theme="theme" class="detail_contanier">
		<!-- 账单头部 -->

		<view class="detail_header bg_color">
			<view class="header_date">

			</view>
			<view class="item">
				<view>实际收入</view>
				<view>{{ accountDetails.realIncome == 0 ? '' : '-' }}￥{{ Math.abs(accountDetails.realIncome) }}</view>
			</view>
			<view class="item">
				<view>实际支出</view>
				<view>{{ accountDetails.actualExpenditure >= 0 ? '' : '-' }} ￥{{
                  Math.abs(accountDetails.actualExpenditure)
                }}</view>
			</view>
			<view class="item">
				<view>{{accountDetails.billIndex == 0 ? '当日结余' : '当月结余' }}</view>
				<view> {{ accountDetails.currentDayBalance >= 0 ? '' : '-' }}
					￥{{ Math.abs(accountDetails.currentDayBalance) }}</view>
			</view>
		</view>
		<!-- 账单详情列表 -->
		<scroll-view scroll-y class="card_list">
			<!-- 订单应收 -->
			<view class="card_item">
				<view class="header">
					<view>订单应收</view>
					<view>￥{{ accountDetails.orderReceivable ? formatAmount(accountDetails.orderReceivable) : '0.00' }}
					</view>
				</view>
				<view class="body">
					<view class="item_header">
						<view class="left">
							订单实际支付金额
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.orderRealIncome ? formatAmount(accountDetails.orderRealIncome) : '0.00'  }}
							</view>
							<view>{{ accountDetails.payNum ?  accountDetails.payNum : '0' }}笔</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							平台优惠补贴
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.platCouponPrice ? formatAmount(accountDetails.platCouponPrice) : '0.00'  }}
							</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							平台积分补贴
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.integralPrice  ? formatAmount(accountDetails.integralPrice) : '0.00' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单应退 -->
			<view class="card_item">
				<view class="header">
					<view>订单应退</view>
					<view>
						-￥{{ accountDetails.orderRefundable ? formatAmount(accountDetails.orderRefundable) : '0.00'  }}
					</view>
				</view>
				<view class="body">
					<view class="item_header">
						<view class="left">
							订单实际退款金额
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.orderRealRefund  ? formatAmount(accountDetails.orderRealRefund) : '0.00' }}
							</view>
							<view>{{ accountDetails.refundNum ? accountDetails.refundNum : '0'}}笔</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							退还平台优惠卷补贴
						</view>
						<view class="right">
							<view>
								-￥{{ accountDetails.refundPlatCouponPrice ? formatAmount(accountDetails.refundPlatCouponPrice) : '0.00'  }}
							</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							退还平台积分补贴
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.refundIntegralPrice ? formatAmount(accountDetails.refundIntegralPrice) : '0.00'  }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 平台手续费 -->
			<view class="card_item">
				<view class="header">
					<view>平台手续费</view>
					{{accountDetails.handlingFee}}
					<view> {{ accountDetails.handlingFee >= 0 ? '' : '-' }}
						￥{{ Math.abs(accountDetails.handlingFee) }}</view>
				</view>
				<view class="body">

					<view class="item_body">
						<view class="left">
							支付手续费
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.payHandlingFee ? formatAmount(accountDetails.payHandlingFee) : '0.00'  }}
							</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							退还手续费
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.refundHandlingFee ? formatAmount(accountDetails.refundHandlingFee) : '0.00'  }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 佣金 -->
			<view class="card_item">
				<view class="header">
					<view>佣金</view>
					<view> {{ accountDetails.brokerage >= 0 ? '' : '-' }}
						￥{{ Math.abs(accountDetails.brokerage) }}</view>
				</view>
				<view class="body">

					<view class="item_body">
						<view class="left">
							支付佣金
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.brokeragePrice ? formatAmount(accountDetails.brokeragePrice) : '0.00'  }}
							</view>
						</view>
					</view>
					<view class="item_body">
						<view class="left">
							退还佣金
						</view>
						<view class="right">
							<view>
								￥{{ accountDetails.refundBrokeragePrice ? formatAmount(accountDetails.refundBrokeragePrice) : '0.00'  }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme'
	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
				detail: {},
			}
		},
		onLoad(options) {
			this.accountDetails = JSON.parse(options.accountDetails)
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			})
		},
		methods: {
			// 金额保留小数点后两位
			formatAmount(amount) {
				// 判断是否包含小数点
				if (amount.toString().indexOf('.') === -1) {
					// 如果不包含小数点，则添加“.00”
					return amount + '.00';
				} else {
					// 如果包含小数点，则直接返回
					return amount;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.detail_contanier {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	// 详情头部
	.detail_header {
		color: white;
		background-color: #eee;
		padding: 20px;
		font-weight: bold;
		font-size: 16px;
		height: 180px;

		.header_date {
			padding: 10px 0;
		}

		.item {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
		}
	}

	// 详情卡片
	.card_list {
		flex: 1;
		min-height: 100px;

		.card_item {
			display: flex;
			flex-direction: column;
			padding: 10px;
			margin: 10px;
			background-color: white;
			border-radius: 5px;

			.header {
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
			}

			.body {
				background-color: #eee;

				.item_header {
					display: flex;
					justify-content: space-between;
					padding: 10px;

					view {
						margin-top: 10px;
					}
				}

				.item_body {
					display: flex;
					justify-content: space-between;
					padding: 10px;

				}
			}
		}
	}
</style>